<template>

  <div class="middle">
    <div class="middle-box">
      <button style="color: #d0d8e7">累计确诊</button>
      <button style="color: #ead254">现存确诊</button>
    </div>
    <div class="middle-box1">
      <div class="middle-box2"></div>
      <div class="middle-box3"></div>
      <div class="middle-box4"></div>
      <Maps />
 
    </div>
  </div>
</template>

<script>
import Maps from "./maps.vue";
export default {
  name: "MyVueEcharts7",
components:{ 
  Maps,
},
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.middle {
  width: 36.25rem;
  height: 37.5rem;

  margin-top: 1.25rem;
  .middle-box {
    width: 100%;
    height: 3.125rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    button {
      width: 6.25rem;
      height: 2.5rem;
      border-radius: 1.25rem;
      border: 0;
      background-color: #193d89;
    }
  }
  .middle-box1 {
    width: 100%;
    height: 34.375rem;

    position: relative;
    .middle-box2 {
      width: 29.375rem;
      height: 29.375rem;

      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-image: url("../assets/jt.c268bab5.png");
      background-size: 100%;
      animation: rotate1 linear 15s infinite;
    }
    .middle-box3 {
      width: 26.25rem;
      height: 26.25rem;

      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-image: url("../assets/map.bab2b509.png");
      background-size: 100%;
      animation: rotate2 linear 15s infinite;
      opacity: 0.5;
    }
    .middle-box4 {
      width: 30.625rem;
      height: 30.625rem;

      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-image: url("../assets/lbx.0dea0f97.png");
      background-size: 100%;
      animation: rotate2 linear 20s infinite;
      opacity: 0.5;
    }
  }
}
// 箭头旋转
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
// 地图旋转
@keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>